import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Radar } from '@ant-design/plots';

const DemoRadar = (props) => {
  // 数据更新于 2021.01.09
  const m = 20
  const n = 100
  console.log("@props", props, props.data)
  const data = props.data ? props.data : [
    {
      name: '国家级产教融合平台',
      star: parseInt(Math.random()*(n-m)+m),
    },
    {
      name: '省部级产教融合平台',
      star: parseInt(Math.random()*(n-m)+m),
    },
    {
      name: '国家级咨政研究',
      star: parseInt(Math.random()*(n-m)+m),
    },
    {
      name: '省部咨政研究',
      star: parseInt(Math.random()*(n-m)+m),
    },
    {
      name: '社会服务',
      star: parseInt(Math.random()*(n-m)+m),
    },

  ];
  const config = {
    title: "南昌大学",
    data: data.map((d) => ({ ...d, star: Math.sqrt(d.star) })),
    xField: 'name',
    yField: 'star',
    padding: 50,
    appendPadding: [0, 10, 0, 10],
    meta: {
      star: {
        alias: '数量',
        min: 0,
        nice: true,
        formatter: (v) => Number(v).toFixed(0),
      },
    },
    tooltip:{
      showCrosshairs:false,
    },
    xAxis: {
      tickLine: null,
    },
    yAxis: {
      label: false,
      grid: {
        alternateColor: 'rgba(0, 0, 0, 0.04)',
      },
    },
    // 开启辅助点
    point: {
      size: 2,
    },
    area: {},
    yAxis: {
      label: {
        style: {
          fontSize: 12
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 16
        }
      }
    },
  };
  return <Radar {...config} />;
};

export default DemoRadar
